<template>
  <div style="text-align: center;margin: 20px 10px 0px 10px;">
    <div style="border-bottom: 1px solid gray;">
      <div>
      <h2>Research News </h2>
      </div>

    </div>
    <div style="text-align: center;">
      <NewsCard v-for="(i,index) in news" :key="index" 
          :uuid  = "i.uuid" 
          :title  = "i.title" 
          :imgUrl = "i.imgUrl" 
          :time = "i.time" 
          :details = "i.details" 
      />

    </div>
  </div>
</template>

<script>
  import NewsCard from './NewsCard.vue'
  export default { 
    components: { NewsCard },
    data() {
      return {
        news: [],
      };
    },
    created() {
      this.$http.get('/json/HomeNews.json').then((response) => {
        // console.log(response);
        this.news = response.data.newsAll;
      });
    }
  };

</script>
<style lang="less" scoped>



</style>
